<template>
<vs-modal :show.sync='show' effect="fade" width="800px">
  <div class="modal-header" slot="modal-header">
    <h4 class="modal-title" >{{cfg._id}}</h4>
  </div>
  <div class="modal-body" slot='modal-body'>
    <form class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-2 control-label">{{$t('webapp.preview')}}</label>
        <div class="col-sm-9" v-el:preview id="lcdbg">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-9">
          <div class="checkbox">
            <label>
              <input type="checkbox" v-model="cfg.enable" :true-value=1 :false-value=0> {{$t('common.enable')}}
            </label>
          </div>
        </div>        
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">{{$t('webapp.color')}}</label>
        <div class="col-sm-9 color-item">
          <vc-compact :colors.sync="title.color"></vc-compact>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">{{$t('webapp.fontsize')}}</label>
        <div class="col-sm-9">
          <div class="input-group"> 
            <input type="range" class="form-control" v-model="cfg.fontSize" min="20" max="100" step="1" @change="onChangeCfg">
            <span class="input-group-addon">{{cfg.fontSize}}</span>
          </div>
        </div>      
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">{{$t('webapp.content')}}</label>
        <div class="col-sm-9">
          <input type="text" class="form-control" v-model="cfg.content" maxlength="32" @change="onChangeCfg">
        </div>      
      </div>
    </form>
  </div>
  <div class="modal-footer" slot='modal-footer'>
    <button type="button" class="btn btn-default" @click.prevent="onQuit">{{$t('common.quit')}}</button>
    <button type="button" class="btn btn-primary" @click.prevent="onSaveChanges">{{$t('common.savechanges')}}</button>
  </div>
</vs-modal>
</template>

<script>
import ebus from 'libs/ebus.js'
import {LcdPreview} from 'libs/canvas.js'
import {http} from 'share/common/api.js'
import {printObj, copyObj, getBackgroundColor} from 'libs/utils.js'
import locales from './locales.js'

//接口坐标是[192,192]
const g_realpos = 192

export default{
  locales,
  data: function(){
    return{
      show: false,
      cfg: {
        _id: 0,
        enable: 1,
        fontSize: 20,
        fontColor: '#FFFFFF',
        posX: 0,
        posY: 0,
        type: 'text',
        content: ''
      },
      title: {
        x: 0,
        y: 0,
        text: 'example',
        bold: false,
        italic: false,
        fontFamily: 'Serif',
        fontSize: 100,
        color: {
          hex: '#6C2D86'    
        }
      },
      bg: {
        color: {
          hex: '#79D285'    
        }
      },
    }  
  },
  methods: {
    onQuit() {
      this.show = false
    },
    onSaveChanges(){
      this.preview2cfg()
      ebus.emit('save-subtitle', this.cfg)
      this.show = false
    },
    cfg2preview () {
      this.title.x = this.cfg.posX * this.scaleX
      this.title.y = this.cfg.posY * this.scaleY
      this.title.text = this.cfg.content
      this.title.fontSize = this.cfg.fontSize * this.fontScale
      this.title.color.hex = this.cfg.fontColor
      this.bg.color.hex = getBackgroundColor(this.title.color.hex)    
    },
    preview2cfg () {
      this.cfg.posX = Math.round(this.title.x / this.scaleX)
      this.cfg.posY = Math.round(this.title.y / this.scaleY)
      this.cfg.fontColor = this.title.color.hex
    },
    onShow (val) {
      copyObj(this.cfg, val)
      this.cfg2preview()
      this.show = true
    },
    onChangeCfg () {
      this.title.text = this.cfg.content
      this.title.fontSize = this.cfg.fontSize * this.fontScale
      this.preview.updateTitle(this.title)
    },
    onTitleColorChange () {
      this.bg.color.hex = getBackgroundColor(this.title.color.hex) 
      this.preview.updateBg(this.bg)
      this.preview.updateTitle(this.title)
    },
    drawPreview () {
      this.showWidth = 576
      this.showHeight = this.showWidth * 9 / 16
      this.scaleX = this.showWidth / g_realpos
      this.scaleY = this.showHeight / g_realpos
      this.fontScale = this.showWidth / 1920
      this.preview.init('lcdbg', {
        width: this.showWidth,
        height: this.showHeight,
        scale: 1
      })
      this.preview.updateBg(this.bg)
      this.preview.updateTitle(this.title)
    }
  },
  ready () {
    this.preview = new LcdPreview()
    this.drawPreview()
    this.$watch('title.color', this.onTitleColorChange, {deep: true})
    ebus.on('show-subtitle-detail', this.onShow)
  },
  beforeDestroy() {
    this.preview.uninit()
  }
}
</script>

<style scoped>
span.input-group-addon {
  min-width: 60px;
}
.color-item .vue-color__compact {
  width: 380px;
}
.color-item .vue-color__compact__fields {
  display: none; /*TODO，未生效*/
}
</style>